<template>
  <div class="gi_table_page">
    <GiTable title="耗材管理" row-key="id" :data="dataList" :columns="columns" :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }" :pagination="pagination" :disabled-tools="['size']"
      :disabled-column-keys="['name']" @refresh="search">
      <template #toolbar-left>
        <a-input :style="{width:'320px'}" v-model="queryForm.fuzzy" placeholder="名称/类型/供应商" allow-clear
        @change="search">
        <template #prefix><icon-search /></template>
      </a-input>
        
        <a-button @click="reset">
          <template #icon><icon-refresh /></template>
          <template #default>重置</template>
        </a-button>
        <a-button v-permission="['asset:consumable:records:create']" type="primary" @click="onAdd">
          <template #icon><icon-plus /></template>
          <template #default>新增</template>
        </a-button>
      </template>
      <template #toolbar-right>


        <a-button v-permission="['asset:consumable:records:inbound']" type="primary" status="success" @click="onInbound">
          <template #icon><icon-plus /></template>
          <template #default>入库</template>
        </a-button>
        <a-button v-permission="['asset:consumable:records:usage']" type="dashed" status="warning" @click="onUsage">
          <template #icon><icon-minus/></template>
          <template #default>领用</template>
        </a-button>
        <a-button v-permission="['asset:consumable:records:import']" type="primary" status="success" @click="onAdd">
          <template #icon><icon-import /></template>
          <template #default>导入耗材</template>
        </a-button>
        <a-button v-permission="['asset:consumable:records:export']" @click="onExport">
          <template #icon><icon-download /></template>
          <template #default>导出</template>
        </a-button>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link v-permission="['asset:consumable:records:get']" title="详情" @click="onDetail(record)">详情</a-link>
          <a-link v-permission="['asset:consumable:records:update']" title="修改" @click="onUpdate(record)">修改</a-link>
          <a-link v-permission="['asset:consumable:records:delete']" status="danger" :disabled="record.disabled"
            :title="record.disabled ? '不可删除' : '删除'" @click="onDelete(record)">
            删除
          </a-link>
        </a-space>
      </template>
    </GiTable>

    <ConsumableRecordsAddModal ref="ConsumableRecordsAddModalRef" @save-success="search" />
    <ConsumableInboundAddModal ref="ConsumableInboundAddModalRef" @save-success="search" />
    <ConsumableUsageAddModal ref="ConsumableUsageAddModalRef" @save-success="search" />
    <ConsumableRecordsDetailDrawer ref="ConsumableRecordsDetailDrawerRef" />
  </div>
</template>

<script setup lang="ts">
  import ConsumableRecordsAddModal from './ConsumableRecordsAddModal.vue'
  import ConsumableRecordsDetailDrawer from './ConsumableRecordsDetailDrawer.vue'
  import ConsumableInboundAddModal from './ConsumableInboundAddModal.vue'
  import ConsumableUsageAddModal from './ConsumableUsageAddModal.vue'
  
  import { type ConsumableRecordsResp, type ConsumableRecordsQuery, deleteConsumableRecords, exportConsumableRecords, listConsumableRecords } from '@/apis/asset/consumable/records'
  import type { TableInstanceColumns } from '@/components/GiTable/type'
  import { useDownload, useTable } from '@/hooks'
  import { useDict } from '@/hooks/app'
  import { isMobile } from '@/utils'
  import has from '@/utils/has'

  defineOptions({ name: 'ConsumableRecords' })

  const queryForm = reactive < ConsumableRecordsQuery > ({
    name: undefined,
    categoryId: undefined,
    count: undefined,
    sort: ['id,desc']
  })

  const {
    tableData: dataList,
    loading,
    pagination,
    search,
    handleDelete
  } = useTable((page) => listConsumableRecords({ ...queryForm, ...page }), { immediate: true })
  const columns = ref < TableInstanceColumns[] > ([
    { title: '名称', dataIndex: 'name', slotName: 'name' },
    { title: '类型', dataIndex: 'categoryName', slotName: 'categoryName' },
    { title: '规格', dataIndex: 'specification', slotName: 'specification' },
    { title: '库存', dataIndex: 'quantity', slotName: 'quantity' },
    { title: '采购价格（元）', dataIndex: 'price', slotName: 'price' },
    { title: '厂商', dataIndex: 'producerName', slotName: 'producerName' },
    { title: '描述', dataIndex: 'description', slotName: 'description', show:false },
    { title: '创建人', dataIndex: 'createUserString', slotName: 'createUser', show:false },
    { title: '创建时间', dataIndex: 'createTime', slotName: 'createTime' },
    { title: '修改人', dataIndex: 'updateUserString', slotName: 'updateUser' , show: false},
    { title: '修改时间', dataIndex: 'updateTime', slotName: 'updateTime' , show: false },
    {
      title: '操作',
      dataIndex: 'action',
      slotName: 'action',
      width: 160,
      align: 'center',
      fixed: !isMobile() ? 'right' : undefined,
      show: has.hasPermOr(['asset:consumable:records:get', 'asset:consumable:records:update', 'asset:consumable:records:delete'])
    }
  ]);

  // 重置
  const reset = () => {
    queryForm.fuzzy = undefined
    search()
  }

  // 删除
  const onDelete = (record: ConsumableRecordsResp) => {
    return handleDelete(() => deleteConsumableRecords(record.id), {
      content: `是否确定删除该条数据？`,
      showModal: true
    })
  }

  // 导出
  const onExport = () => {
    useDownload(() => exportConsumableRecords(queryForm))
  }

  const ConsumableRecordsAddModalRef = ref < InstanceType < typeof ConsumableRecordsAddModal >> ()
  // 新增
  const onAdd = () => {
    ConsumableRecordsAddModalRef.value?.onAdd()
  }

  // 修改
  const onUpdate = (record: ConsumableRecordsResp) => {
    ConsumableRecordsAddModalRef.value?.onUpdate(record.id)
  }

  const ConsumableInboundAddModalRef = ref < InstanceType < typeof ConsumableInboundAddModal >> ()
  // 入库
  const onInbound = () => {
    ConsumableInboundAddModalRef.value?.onAdd()
  }

  const ConsumableUsageAddModalRef = ref < InstanceType < typeof ConsumableUsageAddModal >> ()
  // 领用
  const onUsage = () => {
    ConsumableUsageAddModalRef.value?.onOpen()
  }

  const ConsumableRecordsDetailDrawerRef = ref < InstanceType < typeof ConsumableRecordsDetailDrawer >> ()
  // 详情
  const onDetail = (record: ConsumableRecordsResp) => {
    ConsumableRecordsDetailDrawerRef.value?.onOpen(record.id)
  }
</script>

<style scoped lang="scss"></style>